<template>
  <div class="dangjian">
    <template v-for="(item, index) of honorData" :key="index">
      <div :class="`item-` + (index + 1)" @click="handleCreate(item)">{{ item.name }}</div>
    </template>

    <ScreenModal @register="registerModal" />
  </div>
</template>
<script></script>

<script lang="ts" setup>
  import { useModal } from '/@/components/Modal';
  import ScreenModal from './ScreenModal.vue';
  import { onMounted, reactive, ref } from 'vue';
  import { useWebSocket } from '@vueuse/core';
  import { getCollectiveHonor } from '/@/api/screen/screen';

  const honorData = ref({});
  onMounted(async () => {
    honorData.value = await getCollectiveHonor();
  });

  const [registerModal, { openModal, closeModal }] = useModal();
  // setModalProps({ visible: visible });
  const state = reactive({
    server: 'ws://192.168.10.51:9996/webSocket/1476086545381789697',
    sendValue: '',
    recordList: [] as { id: number; time: number; res: string }[],
  });

  const { data } = useWebSocket(state.server, {
    autoReconnect: false,
    heartbeat: true,
    onMessage: () => {
      try {
        console.log('接收到的数据', data);
        const { result } = JSON.parse(data.value);
        handleCreate({ honorAssets: result });
      } catch (e) {}
    },
  });

  function handleCreate(item) {
    closeModal();

    setTimeout(function () {
      openModal(true, {
        ...item,
      });
    }, 100);
  }
</script>

<style lang="less" scoped>
  .dangjian {
    width: 1920px;
    height: 1080px;
    background: url(../../assets/screen/screen-back.jpg) no-repeat;
    background-size: 100% 100%;
    .item-1,
    .item-2,
    .item-3,
    .item-4,
    .item-5,
    .item-6 {
      position: absolute;
      font-size: 36px;
      line-height: 101px;
      color: #ffffff;
      text-align: center;
    }

    .item-1 {
      width: 327px;
      height: 100px;
      left: 497px;
      top: 258px;
    }

    .item-2 {
      width: 327px;
      height: 100px;
      left: 190px;
      top: 591px;
      //background: url(../assets/screen/鸽子2.png) no-repeat;
      //background-size: 100% 100%;
    }

    .item-3 {
      width: 327px;
      height: 100px;
      left: 733px;
      top: 789px;
    }

    .item-4 {
      width: 327px;
      height: 100px;
      left: 998px;
      top: 485px;
      //background: url(../assets/screen/鸽子4.png) no-repeat;
      //background-size: 100% 100%;
    }

    .item-5 {
      width: 327px;
      height: 100px;
      left: 1396px;
      top: 191px;
      //background: url(../assets/screen/鸽子5.png) no-repeat;
      //background-size: 100% 100%;
    }

    .item-6 {
      width: 327px;
      height: 100px;
      left: 1519px;
      top: 634px;
      //background: url(../assets/screen/鸽子6.png) no-repeat;
      //background-size: 100% 100%;
    }
  }
</style>
<style>
  body {
    margin: 0;
  }

  .el-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .el-dialog__header {
    display: none;
  }

  .el-dialog__body {
    padding: 0;
  }
</style>
